import React from 'react';
import { Form, Input, Button, DatePicker } from 'antd';

const { RangePicker } = DatePicker;

@Form.create()
class AdvancedFilter extends React.Component {

  componentDidMount() {
    const { getRef } = this.props;
    if (getRef) getRef(this);
  }

  handleReset = () => {
    const { form, handleParamsChange } = this.props;
    form.resetFields();
    handleParamsChange({ key: '', timeStart: '', timeEnd: '' });
  }

  handleSubmit = e => {
    if (e && e.preventDefault) e.preventDefault();
    const { form, handleParamsChange, handleSearch } = this.props;
    form.validateFields((err, values) => {
      if (err) {
        return;
      }
      const { datatime, searchKey } = values;
      const param = { searchKey };
      if (datatime && datatime.length > 0) {
        param.timeStart = datatime[0].format('YYYY-MM-DD HH:mm:ss');
        param.timeEnd = datatime[1].format('YYYY-MM-DD HH:mm:ss');
      } else {
        param.timeStart = "";
        param.timeEnd = "";
      }
      handleParamsChange(param);
      handleSearch();
    });
  }

  onRangeChange = (dates, dateStrings) => {
    const { handleParamsChange } = this.props;
    const param = { timeStart: dateStrings[0], timeEnd: dateStrings[1] };
    handleParamsChange(param);
  }

  onInputChage = (e) => {
    const { handleParamsChange } = this.props;
    handleParamsChange({ searchKey: e.target.value });
  }

  render() {
    const { form, visible } = this.props;
    const { getFieldDecorator } = form;
    return (
      <div className={`filter__box ${!visible ? 'box__hidden' : ''}`}>
        <Form layout='inline'>
          <div className='filter_form_box'>
            <Form.Item
              label="创建时间"
            // {...formItemLayout1}
            >
              {getFieldDecorator('datatime', {
                initialValue: '',
              })(
                <RangePicker
                  format='YYYY-MM-DD HH:mm:ss'
                  className='input__search'
                  onChange={this.onRangeChange}
                  placeholder={['开始时间', '结束时间']}
                  showTime
                />
              )}
            </Form.Item>
            <Form.Item
              label="表单编码"
            // {...formItemLayout1}
            >
              {getFieldDecorator('searchKey', {
                initialValue: '',
              })(
                <Input
                  className='input__search'
                  placeholder="请输入表单编码"
                  onChange={this.onInputChage}
                />
              )}
            </Form.Item>
            <div className='filter_buttons'>
              <Button type="primary" size='small' onClick={this.handleSubmit}>查询</Button>
              <Button size='small' onClick={this.handleReset}>重置</Button>
            </div>
          </div>

        </Form>
      </div>
    );
  }
}
export default AdvancedFilter;